<template>
  <van-popup
    class="SearchFlagPopup"
    v-model:show="props.show"
    position="center"
    :z-index="999999"
    teleport="body"
    close-on-popstate
    safe-area-inset-bottom
    :close-on-click-overlay="false"
    :style="{ width: '100vw' }"
    @click-overlay="closePopup"
    @click-close-icon="closePopup"
  >
    <!-- 内容 -->
    <div class="searchFlag">
      <div class="searchFlag-search">
        <img class="searchFlag-search-img" src="/image/search-icon.svg" />
        <van-field
          class="searchFlag-search-input"
          v-model="pageData.input"
          type="text"
          center
          clearable
          label=""
          :placeholder="$t('airdrop.qsr')"
          @update:model-value="updateInput"
          @blur="blurInptu"
        />
      </div>
      <!-- 全部数据 -->
      <div class="searchFlag-friendship" v-show="pageData.hideSubMenu">
        <section
          v-for="item in countriesArray"
          :key="item.id"
          :class="
            'country ' + (item.code == pageData.currentCode ? 'highlight' : '')
          "
          @click="setCountry(item)"
        >
          <section class="country-left">
            <div class="flag-box">
              <!-- 国旗 -->
              <FlagIcon class="icon" :iso="item.code" />
              <div class="y"></div>
            </div>
            <span class="country-name">{{ item.name }}</span>
          </section>
          <span class="country-code">+{{ item.dialCode }}</span>
        </section>
      </div>
      <!-- 搜索结果 -->
      <div class="searchFlag-friendship" v-show="!pageData.hideSubMenu">
        <div
          v-if="pageData.arr1.length == 0"
          class="searchFlag-friendship-nodata"
        >
          暂无内容
        </div>
        <section
          v-for="item in pageData.arr1"
          :key="item.id"
          :class="
            'country ' + (item.code == pageData.currentCode ? 'highlight' : '')
          "
          @click="setCountry(item)"
        >
          <section class="country-left">
            <div class="flag-box">
              <FlagIcon class="icon" :iso="item.code" />
              <div class="y"></div>
            </div>
            <span class="country-name">{{ item.name }}</span>
          </section>
          <span class="country-code">+{{ item.dialCode }}</span>
        </section>
      </div>
    </div>
    <!-- 关闭 -->
    <img
      class="close"
      src="/image/close-fff-icon.svg"
      @click.stop="closePopup"
    />
  </van-popup>
</template>
<script setup lang="ts" name="SearchFlag">
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import FlagIcon from "../flag-icon/index.vue";
import { nation } from "~/config/nation.ts";

const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    show: boolean;
  }>(),
  {
    show: false,
  }
);

const emit = defineEmits(["update:show", "changeCode"]);

// 页面属性
const pageData = reactive({
  currentCode: "",
  hideSubMenu: true,
  arr: [],
  input: "",
  arr1: [],
  str: "",
});

// 国旗
// const currentData = computed(() => {
//   return nation[pageData.currentCode];
// });
const countriesArray = computed(() => {
  //  所有的数据
  const countryCopie = { ...nation };
  return countryCopie;
});

// 选择国旗
const setCountry = (item: any) => {
  pageData.currentCode = item.code;
  emit("changeCode", item);
  closePopup();
};

// 失去焦点
const blurInptu = () => {
  // console.log("blurInptu:");
  if (!pageData.input) {
    pageData.hideSubMenu = true;
  }
};
// 输入框内容变化
const updateInput = (e: any) => {
  // console.log("inputChange:", e);

  let countryCopies: any = { ...nation };
  //每次调用此方法的时候清空添加的数组
  pageData.arr1 = [];
  for (let i in countryCopies) {
    // 查询符合搜索条件对象，符合返回true
    let count = countryCopies[i].chinese.includes(pageData.input);
    let newArrs = countryCopies[i].name.includes(pageData.input);
    let newArry = String("+" + countryCopies[i].dialCode).includes(
      pageData.input
    );
    // 当为true时，
    if (count || newArrs || newArry) {
      //判断arr1数组里面是否添加过此条数据，没添加返回-1
      let a2 = pageData.arr1.findIndex((v) => {
        return v.chinese == countryCopies[i].chinese;
      });
      //当返回-1时，将符合条件的push进去
      if (a2 == -1) {
        pageData.arr1.push(countryCopies[i]);
      }
    }
  }
  pageData.hideSubMenu = false;
};
/**
 * @description: 关闭弹窗
 */
const closePopup = () => {
  emit("update:show", false);
};
</script>
<style lang="scss" scoped>
.SearchFlagPopup {
  background-color: transparent !important;
  margin: 0;
  max-width: 100vw;
  overflow: initial;
}

.close {
  position: absolute;
  z-index: 9;
  bottom: -50 * 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 30 * 2px;
  height: 30 * 2px;
}

.searchFlag {
  margin: 0 25 * 2px;
  padding: 15 * 2px 10 * 2px;
  border-radius: 12 * 2px;
  background-color: #fff;
  max-height: 60vh;
  overflow-y: scroll;
  overflow-x: hidden;

  &-search {
    display: flex;
    align-items: center;
    background: rgba(244, 245, 246, 1);
    border-radius: 100px;
    overflow: hidden;

    &-input {
      flex: 1;
      background: rgba(244, 245, 246, 1);
      padding: 4 * 2px 8 * 2px 4 * 2px 0;
    }

    &-img {
      width: 30px;
      height: 30px;
      margin: 0 10 * 2px;
    }
  }

  &-friendship {
    min-height: 60vh;
    &-nodata {
      height: 60vh;
      line-height: 60vh;
      text-align: center;
      font-size: 17 * 2px;
      color: #999da7;
    }
  }
}
.country {
  width: 100%;
  height: 94px;
  border-bottom: 0.7px solid rgba(238, 238, 238, 1);
  display: flex;
  align-items: center;
  padding: 0 10 * 2px;
  box-sizing: border-box;
  justify-content: space-between;

  .country-left {
    display: flex;
    align-items: center;

    .flag-box {
      width: 52px;
      height: 36px;
      font-size: 32px;
      margin-right: 16px;
      position: relative;

      .icon {
        display: block;
        width: 52px;
        height: 36px;
      }

      .y {
        box-sizing: border-box;
        width: 52px;
        height: 36px;
        border: 0.2667vw solid rgba(136, 142, 147, 0.15);
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 2;
      }
    }

    .country-name {
      font-size: 30px;
    }
  }

  .country-code {
    font-size: 30px;
  }
}
</style>
